<template>
  <div v-loading="loading">
    <el-table
      ref="LindadayoTable"
      :data="data"
      border
      :style="tableStyle"
      :max-height="maxHeight"
      :row-class-name="tabRowClassName"
      :row-style="rowStyle"
      :cell-class-name="cellClassName"
      :header-row-class-name="headerRowClassName"
      :row-key="keyId"
      @selection-change="handleSelectionChange"
    >
      <!-- 单选框 -->
      <el-table-column
        v-if="showCheckBox"
        key="showCheckBox"
        width="55"
        type="selection"
        :reserve-selection="keep"
        :class-name="turnRadio ? `checkBoxRadio` : ``"
        align="center"
      />
      <!-- 展开 -->
      <el-table-column
        v-if="showExpand"
        key="showExpand"
        type="expand"
      >
        <template slot-scope="{ row }">
          <slot name="expand" :row="row" />
        </template>
      </el-table-column>
      <!-- 序号 -->
      <el-table-column
        v-if="showIndex"
        align="center"
        label="序号"
        width="50"
      >
        <template slot-scope="{ $index }">{{ $index + 1 }}</template>
      </el-table-column>
      <!-- 表格 -->
      <el-table-column
        v-for="item in tableLabel.filter((item) => item.label)"
        :key="item[keyId]"
        :width="item.width ? item.width : ''"
        :align="!!item.align ? item.align : 'center'"
        :label="item.label"
        :show-overflow-tooltip="overflowText"
        :fixed="item.fixed"
        :prop="item.prop"
      >
        <template slot-scope="{ row }">
          <template v-if="item.render">
            <template>
              <div
                style="cursor: pointer"
                @click="!!item.methods && handleClickon(item.methods, row)"
                v-html="item.render(row)"
              />
            </template>
          </template>
          <template v-else>
            <div class="text-no-wrap" @click="!!item.methods && handleClickon(item.methods, row)">
              {{ (row[item.prop] ? row[item.prop] : '--') }}
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column v-if="!!option" :width="option.width" :label="option.label" :fixed="option.fixed" align="center">
        <div
          v-if="!!option.children"
          slot-scope="{row}"
          class="flex-box"
        >
          <div
            v-for="(item, index) in option.children.filter(item => item.render ? item.render(row) : true)"
            :key="index"
          >
            <el-tooltip
              v-if="!item.type"
              class="item"
              effect="light"
              :popper-class="item.popperClass || 'Lindadayo-tooltip-primary'"
              :content="item.label"
              placement="top"
            >
              <i
                v-permission="{ permission: item.permission }"
                :class="['Lindadayo-tooltip-icon', item.icon]"
                :plain="true"
                @click="handleTableButton(row, item.methods)"
              />
            </el-tooltip>
            <el-dropdown
              v-if="item.type==='drop'"
              v-permission="{ permission: item.permission }"
              class="item"
              @command="(command) => {handleTableButton(row, command)}"
            >
              <span class="el-dropdown-link">
                <i :class="['Lindadayo-tooltip-icon', item.icon]" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="itm in item.children.filter(itm_child => itm_child.render ? itm_child.render(row) : true)"
                  :key="itm.methods"
                  v-permission="{ permission: itm.permission }"
                  :command="itm.methods"
                >
                  <i
                    v-if="itm.icon"
                    :class="['Lindadayo-tooltip-icon', itm.icon]"
                    :plain="true"
                  />
                  {{ itm.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'CommonTable',
  props: {
    /**
     * 表格最高高度
     */
    maxHeight: {
      type: [String, Number],
      default: 'auto'
    },
    /**
     * 表格自定义属性展示
     */
    tableLabel: {
      type: Array,
      default: () => {
        return []
      }
    },
    /**
     * 表格数据源
     */
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    /**
     * 配置需要显示的操作菜单
     */
    option: {
      type: Object,
      default: () => {}
    },
    showCheckBox: {
      // 配置是否显示全选（复选框）
      type: Boolean,
      default: false
    },
    /**
     * 是否显示索引
     */
    showIndex: {
      type: Boolean,
      default: false
    },
    /**
     * 是否是单选
     */
    turnRadio: {
      type: Boolean,
      default: false
    },
    /**
     * 是否 隐藏文字过长
     */
    overflowText: {
      type: Boolean,
      default: false
    },
    /**
     * 加载提示
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * 是否保持之前复选框的数据
     */
    keep: {
      type: Boolean,
      default: false
    },
    /**
     * 动态绑定 key 值
     */
    keyId: {
      type: String,
      default: 'id'
    },
    /**
     * 行内自定义样式配置
     */
    rowStyle: {
      type: Object,
      default: () => {
        return {
          height: '40px'
        }
      }
    },
    /**
     * 是否展示展开按钮
     */
    showExpand: {
      type: Boolean,
      default: false
    },
    /**
     * 行内自定义class
     */
    rowClassName: {
      type: Function,
      default: () => {
        return () => {}
      }
    },
    /**
     * 单元格自定义class
     */
    cellClassName: {
      type: Function,
      default: () => {
        return () => {}
      }
    },
    /**
     * 表头行内自定义class
     */
    headerRowClassName: {
      type: [Function, String],
      default: 'custom-table-header'
    }
  },
  computed: {
    tableStyle() {
      return {
        borderBottom: this.maxHeight === 'auto' ? 'none' : '1px solid #e8eded'
      }
    }
  },
  methods: {
    /**
     * el-table-column点击事件（操作栏）
     * @param {*} methods
     * @param {*} type
     */
    handleTableButton(row, type) {
      if (!type) return;
      this.$emit('operation', row, type);
    },
    /**
     * el-table-column点击事件（非操作栏）
     * @param {*} methods
     * @param {*} row
     */
    handleClickon(methods, row) {
      if (!methods) return;
      this.$emit(methods, { methods, row })
    },
    /**
     * 复选框操作回调事件
     * @param val 选中项的数据
     */
    handleSelectionChange(val) {
      // 单选 && 选中项为多个时
      if (this.turnRadio && val.length > 1) {
        const del_row = val.shift();
        // 取消之前的选择项的选中状态
        this.$refs.LindadayoTable.toggleRowSelection(del_row, false);
        return;
      }
      this.$emit('handle-selection-change', val);
    },
    // 斑马纹表格背景色
    tabRowClassName({ row, rowIndex }) {
      const classList = [];
      // 默认样式配置
      const index = rowIndex + 1;
      if (index % 2 === 0) {
        classList.push('even-row');
      } else {
        classList.push('odd-row');
      }
      // 自定义样式配置
      classList.push(this.rowClassName({ row, rowIndex }))
      return classList.join(' ');
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table {
  width: 100%;
  .el-table__header,
  .el-table__body {
    margin: 0;
  }
  .el-table::before {
    height: 0;
  }
  .el-button {
    border: none;
    margin: 0 4px;
    padding: 0 4px 0 8px;
    border-left: 1px solid #e2e2e2;
    font-size: 14px;
    min-height: 14px;
    &:first-child {
      border-left: none;
    }
  }
  .el-button + .el-button {
    margin-left: 0;
  }
  .even-row {
    --el-table-tr-background-color: #f5fafb;
  }
  .odd-row {
    --el-table-tr-background-color: #ffffff;
  }
  .el-table--border::after,
  .el-table--group::after {
    width: 0;
  }
  .el-table__fixed-right::before,
  .el-table__fixed::before {
      background-color: transparent;
    }
  .custom-table-header {
    th {
      background-color: #fff4d9;
    }
  }
  .text-no-wrap {
    cursor: pointer;
    display: inline;
  }
  td.el-table__cell div,
  th.el-table__cell > .cell {
    font-size: 14px;
  }
  th.el-table__cell > .cell {
    font-weight: normal;
  }
  .cell {
    padding: 0 10px;
    line-height: 39px;
  }
  .el-table__header-wrapper .checkBoxRadio .el-checkbox {
    display: none;
  }
  .el-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-table--small .el-table__cell {
    padding: 0;
  }
  .el-dropdown-menu__item {
    padding: 5px 10px !important;
    .el-button {
      width: 100%;
      text-align: center;
      padding: 0 8px;
      margin: 0;
    }
  }
  .flex-box{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    .item{
      margin: 0 10px;
    }
  }
  .el-tooltip {
    font-size: 16px;
  }
}
</style>
